import { useState, ChangeEvent } from 'react';
import { message } from 'antd';

import CountDown from '@/components/countDown';
import requestInstance from '@/service/fetch';
import userStore from '@/store/userStore';

import Styles from './index.module.scss';

interface IProps {
  isShow: boolean;
  onClose: Function;
}

const Login = ({ isShow = false, onClose }: IProps) => {
  const [form, setForm] = useState({
    phone: '',
    verify: '',
  });
  const [type] = useState('phone');
  const [isShowVerifyCode, setIsShowVerifyCode] = useState(false);

  const setUserInfo = userStore((state) => state.setUserInfo);

  const handleClose = () => {
    onClose?.();
  };
  const handleLogin = async () => {
    const result: any = await requestInstance.post('/api/user/login', {
      ...form,
      identity_type: type,
    });
    if (result?.code === 200) {
      // 登录成功
      setUserInfo(result?.data);
      onClose?.();
    } else {
      message.error(result?.msg || '未知错误');
    }
  };
  const handleGetVerifyCode = async () => {
    // 先拿手机号
    if (!form.phone) {
      message.error('请输入手机号');
      return;
    }
    const params = {
      to: form.phone,
      templateId: 1,
    };

    const result: any = await requestInstance
      .post('/api/user/sendVerifyCode', params)
      .catch(() => {
        message.error(result?.msg || '未知错误');
      });
    if (result?.code === 200) {
      setIsShowVerifyCode(true);
      message.success(`验证码为${result?.data?.code}`, 10);
    }
  };
  const handleFormChange = (e: ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setForm({
      ...form,
      [name]: value,
    });
  };

  const handleCountDownEnd = () => {
    setIsShowVerifyCode(false);
  };

  return isShow ? (
    <div className={Styles.loginArea}>
      <div className={Styles.loginBox}>
        <div className={Styles.loginTitle}>
          <div>手机号登录</div>
          <div className={Styles.close} onClick={handleClose}>
            x
          </div>
        </div>
        <input
          name="phone"
          type="text"
          placeholder="请输入手机号"
          value={form.phone}
          onChange={handleFormChange}
        />
        <div className={Styles.verifyCodeArea}>
          <input
            name="verify"
            type="text"
            placeholder="请输入验证码"
            value={form.verify}
            onChange={handleFormChange}
          />
          <span className={Styles.verifyCode} onClick={handleGetVerifyCode}>
            {isShowVerifyCode ? (
              <CountDown time={10} onEnd={handleCountDownEnd} />
            ) : (
              '获取验证码'
            )}
          </span>
        </div>
        <div className={Styles.loginBtn} onClick={handleLogin}>
          登录
        </div>
        <div className={Styles.loginPrivacy}>
          注册登录即表示同意
          <a href="https://www.baidu.com" target="_blank">
            隐私政策
          </a>
        </div>
      </div>
    </div>
  ) : null;
};

export default Login;
